// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { InputItem, List, Modal, Toast, Picker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getCountry, getAddress, addAddress, editAddress } from './module/module.js'
import { getAddressList } from '../Address/module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, Radio } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, validation } from '../../util/utils.js'

class EditAddress extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      // title: params.type && params.type == 'edit' ? '修改地址' : '新增地址',
      // addressType: params.type,
      title: props.id ? '修改地址' : '新增地址',
      provinceId: [],
      name: '',
      phoneNumber: '',
      detailAddress: '',
      email: '',
      postCode: ''
    }
    this.getCountry = getCountry.bind(this)
    this.getAddress = getAddress.bind(this)
    this.addAddress = addAddress.bind(this)
    this.editAddress = editAddress.bind(this)
    this.getAddressList = getAddressList.bind(this)
  }

  componentDidMount() {
    const { id } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    if (id) {
      this.getAddress({
        id
      }).then(res => {
        const { name, phoneNumber, provinceId, detailAddress, email, postCode } = res.data.data
        this.setState({
          name, phoneNumber, provinceId: [provinceId], detailAddress, email, postCode
        })
        this.name = name;
        this.phoneNumber = phoneNumber;
        this.provinceId = provinceId;
        this.detailAddress = detailAddress;
        this.email = email;
        this.postCode = postCode;
      })
    }
    this.getCountry({
      id: 1
    })
    // });
  }

  handleAddAddress() {
    console.log(this.phoneNumber)
    if (!this.provinceId) {
      Toast.info('请填写所在地区', 1, null, false);
      return
    }
    if (!this.detailAddress) {
      Toast.info('请填写详细地址', 1, null, false);
      return
    }
    if (!this.name) {
      Toast.info('请输入联系人姓名', 1, null, false);
      return
    }
    if (!this.phoneNumber) {
      Toast.info('请输入手机号', 1, null, false);
      return
    }
    if (!validation.phone(this.phoneNumber)) {
      Toast.fail('请输入9-11位手机号', 1, null, false);
      return;
    }
    if (!this.email) {
      Toast.info('请输入邮箱', 1, null, false);
      return
    }
    if (!validation.email(this.email)) {
      Toast.info('请输入正确的邮箱', 1, null, false);
      return
    }
    if (!this.postCode) {
      Toast.info('请输入邮政编码', 1, null, false);
      return
    }

    this.addAddress({
      defaultStatus: 1,
      provinceId: this.provinceId,
      detailAddress: this.detailAddress,
      name: this.name,
      phoneNumber: this.phoneNumber,
      email: this.email,
      postCode: this.postCode,
    })
  }

  handleEditAddress() {
    const { id } = this.props
    if (!this.provinceId) {
      Toast.info('请填写所在地区', 1, null, false);
      return
    }
    if (!this.detailAddress) {
      Toast.info('请填写详细地址', 1, null, false);
      return
    }
    if (!this.name) {
      Toast.info('请输入联系人姓名', 1, null, false);
      return
    }
    if (!this.phoneNumber) {
      Toast.info('请输入手机号', 1, null, false);
      return
    }
    if (!validation.phone(this.phoneNumber)) {
      Toast.fail('请输入9-11位手机号', 1, null, false);
      return;
    }
    if (!this.email) {
      Toast.info('请输入邮箱', 1, null, false);
      return
    }
    if (!validation.email(this.email)) {
      Toast.info('请输入正确的邮箱', 1, null, false);
      return
    }
    if (!this.postCode) {
      Toast.info('请输入邮政编码', 1, null, false);
      return
    }

    this.editAddress({
      id,
      defaultStatus: 1,
      provinceId: this.provinceId,
      detailAddress: this.detailAddress,
      name: this.name,
      phoneNumber: this.phoneNumber,
      email: this.email,
      postCode: this.postCode,
    })
  }

  render() {
    const { countryList, id } = this.props
    const { title, name, phoneNumber, email, provinceId, detailAddress, postCode } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title={title}
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{ paddingBottom: 30 }}>
            <View style={{
              backgroundColor: '#fff',
              marginBottom: 10,
            }}>
              <View
                style={{
                  overflow: 'hidden',
                  backgroundColor: '#fff',
                  zIndex: 0
                }}
              >
                <List>
                  <Picker
                    data={countryList}
                    cols={1}
                    value={provinceId}
                    onChange={(value) => {
                      this.provinceId = value[0]
                      this.setState({
                        provinceId: value
                      })
                    }}
                  >
                    <List.Item arrow="horizontal" >所在地区</List.Item>
                  </Picker>
                  <InputItem
                    clear
                    defaultValue={detailAddress}
                    onChange={(value) => {
                      this.detailAddress = value
                    }}
                    labelNumber={4}
                    placeholder="请填写详细地址"
                  >详细地址</InputItem>
                  <InputItem
                    clear
                    onChange={(value) => {
                      this.name = value
                    }}
                    defaultValue={name}
                    labelNumber={4}
                    placeholder="请输入联系人姓名"
                  >姓名</InputItem>
                  <InputItem
                    clear
                    onChange={(value) => {
                      this.phoneNumber = value
                    }}
                    defaultValue={phoneNumber}
                    labelNumber={4}
                    placeholder="请输入联系人电话号码"
                  >电话</InputItem>
                  <InputItem
                    clear
                    type="email"
                    onChange={(value) => {
                      this.email = value
                    }}
                    defaultValue={email}
                    labelNumber={4}
                    placeholder="请输入邮箱地址"
                  >邮箱</InputItem>
                  <InputItem
                    clear
                    type="phone"
                    onChange={(value) => {
                      this.postCode = value
                    }}
                    defaultValue={postCode}
                    labelNumber={4}
                    placeholder="请输入邮政编码"
                  >邮编</InputItem>
                </List>
              </View>
            </View>
          </View>
          <View style={{ padding: 15 }}>
            <TouchableOpacity
              onPress={() => {
                if (id) {
                  this.handleEditAddress()
                } else {
                  this.handleAddAddress()
                }
              }}
              style={{
                paddingVertical: 14,
                paddingHorizontal: 20,
                backgroundColor: '#f23030',
                borderRadius: 23,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>确定</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}


export default connect(({ countryList }) => ({
  countryList,
}))(pureRender(EditAddress))
